<template>
  <div
      id="cyFloatingBall"
      :class="{
      active: isDialogVisible,
      'cy-selector-mode': isSelectorMode
    }"
      @mousedown="startDrag"
      @touchstart="startDrag"
      @click="toggleDialog"
  >
    <div class="ball-content">
      <div class="ball-icon">✦</div>
      <div class="ball-tooltip" v-if="showTooltip">{{ tooltipText }}</div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'

export default {
  props: {
    isSelectorMode: {
      type: Boolean,
      default: false
    },
    tooltipText: {
      type: String,
      default: '前端工具'
    }
  },

  emits: ['click'],

  setup(props, { emit }) {
    const isDialogVisible = ref(false)
    const isDragging = ref(false)
    const showTooltip = ref(false)
    const dragStartX = ref(0)
    const dragStartY = ref(0)
    const ballPosition = ref({ x: 0, y: 0 })
    const BALL_SIZE = 52

    // 初始化位置
    const initPosition = () => {
      const savedPosition = JSON.parse(localStorage.getItem('floatingBallPosition') || 'null')
      ballPosition.value = savedPosition || { x: 0, y: 0 }
      updateBallPosition()
    }

    const updateBallPosition = () => {
      const ball = document.getElementById('cyFloatingBall')
      if (ball) {
        ball.style.left = `${ballPosition.value.x}px`
        ball.style.top = `${ballPosition.value.y}px`
      }
    }

    const savePosition = () => {
      localStorage.setItem('floatingBallPosition', JSON.stringify(ballPosition.value))
    }

    // 拖拽功能
    const startDrag = (e) => {
      isDragging.value = true
      const clientX = e.clientX || e.touches[0].clientX
      const clientY = e.clientY || e.touches[0].clientY

      const ball = document.getElementById('cyFloatingBall')
      dragStartX.value = clientX - ball.offsetLeft
      dragStartY.value = clientY - ball.offsetTop
      ball.style.transition = 'none'

      document.addEventListener('mousemove', handleDrag)
      document.addEventListener('mouseup', stopDrag)
      document.addEventListener('touchmove', handleDrag)
      document.addEventListener('touchend', stopDrag)

      if (e.cancelable) e.preventDefault()
    }

    const handleDrag = (e) => {
      if (!isDragging.value) return

      const clientX = e.clientX || e.touches[0].clientX
      const clientY = e.clientY || e.touches[0].clientY

      const maxX = window.innerWidth - BALL_SIZE
      const maxY = window.innerHeight - BALL_SIZE

      ballPosition.value = {
        x: Math.max(0, Math.min(clientX - dragStartX.value, maxX)),
        y: Math.max(0, Math.min(clientY - dragStartY.value, maxY))
      }

      updateBallPosition()
    }

    const stopDrag = () => {
      if (!isDragging.value) return

      isDragging.value = false
      const ball = document.getElementById('cyFloatingBall')
      ball.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
      savePosition()

      // 自动贴边
      autoSnapToEdge()

      document.removeEventListener('mousemove', handleDrag)
      document.removeEventListener('mouseup', stopDrag)
      document.removeEventListener('touchmove', handleDrag)
      document.removeEventListener('touchend', stopDrag)
    }

    // 自动贴边
    const autoSnapToEdge = () => {
      const ball = document.getElementById('cyFloatingBall')
      const rect = ball.getBoundingClientRect()
      const centerX = rect.left + rect.width / 2
      const newX = centerX < window.innerWidth / 2 ? 0 : window.innerWidth - rect.width

      ball.style.transition = 'left 0.3s ease'
      ballPosition.value = { ...ballPosition.value, x: newX }
      updateBallPosition()

      setTimeout(() => {
        ball.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
      }, 300)

      savePosition()
    }

    // 显示/隐藏对话框
    const toggleDialog = (e) => {
      if (isDragging.value) {
        isDragging.value = false
        return
      }

      isDialogVisible.value = !isDialogVisible.value
      emit('click', isDialogVisible.value)
    }

    // 显示工具提示
    const showTooltipWithDelay = () => {
      setTimeout(() => {
        showTooltip.value = true
      }, 1000)
    }

    const hideTooltip = () => {
      showTooltip.value = false
    }

    // 窗口大小变化处理
    const handleResize = () => {
      const ball = document.getElementById('cyFloatingBall')
      const rect = ball.getBoundingClientRect()
      const maxX = window.innerWidth - BALL_SIZE
      const maxY = window.innerHeight - BALL_SIZE

      if (rect.left > maxX || rect.top > maxY) {
        ballPosition.value = {
          x: Math.min(rect.left, maxX),
          y: Math.min(rect.top, maxY)
        }
        updateBallPosition()
        savePosition()
      }
    }

    // 初始化
    onMounted(() => {
      initPosition()
      window.addEventListener('resize', handleResize)

      const ball = document.getElementById('cyFloatingBall')
      ball.addEventListener('mouseenter', showTooltipWithDelay)
      ball.addEventListener('mouseleave', hideTooltip)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize)
      const ball = document.getElementById('cyFloatingBall')
      if (ball) {
        ball.removeEventListener('mouseenter', showTooltipWithDelay)
        ball.removeEventListener('mouseleave', hideTooltip)
      }
    })

    return {
      isDialogVisible,
      showTooltip,
      startDrag,
      toggleDialog
    }
  }
}
</script>
<style scoped>
#cyFloatingBall {
  position: fixed;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #00ff87 0%, #60efff 100%);
  border-radius: 15px;
  cursor: move;
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.3);
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: none;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

#cyFloatingBall::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #00ff87 0%, #60efff 100%);
  opacity: 0.8;
  z-index: -1;
  filter: blur(5px);
}

#cyFloatingBall.active {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 0 25px rgba(0, 255, 135, 0.5);
}

#cyFloatingBall.cy-selector-mode {
  opacity: 0.5;
  pointer-events: none;
}

.ball-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball-icon {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(0, 255, 135, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#cyFloatingBall.active .ball-icon {
  transform: rotate(-15deg);
}

.ball-tooltip {
  position: absolute;
  top: -35px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.ball-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
}

#cyFloatingBall:hover .ball-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  #cyFloatingBall {
    width: 46px;
    height: 46px;
  }

  .ball-icon {
    font-size: 20px;
  }
}

/* 动画效果 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

#cyFloatingBall:not(.active):not(.cy-selector-mode) {
  animation: float 3s ease-in-out infinite;
}
</style>
